import { useState,useMemo } from "react";
// useMemo可用于计算
function App(){
    let [num,setNum] = useState(1);
    let [price,setPrice] = useState(10)
    let [msg,setMsg] = useState("算你狠")
    // function getSum(){
    //     console.log("触发啦")
    //     return num*price
    // }
    // 参数一执行回调 参数二依赖项 若为空数组则表示不依赖任意数据
    let getSum = useMemo(()=>{
        console.log("执行啦")
        // 必须要返回计算结果
        return price*num
    },[num,price])
    return (
        <div>
            <h1>useMemo 缓存计算---{msg}</h1>
            <button onClick={()=>{
                setMsg("你很好")
            }}>改变</button>
           商品数量： <input type="text" value={num} onChange={(e)=>{setNum(e.target.value)}}/>
           * 
           商品单价: <input type="text" value={price} onChange={(e)=>{setPrice(e.target.value)}}/>
           =
           商品总价：{getSum}
        </div>
    )
}
/* 
 useMemo 用来进行缓存优化，通常用来计算返回一个计算结果 有两个参数 参数一执行回调（返回计算结果），参数二 依赖项为数组 当其依赖得数据发生改变时才会调用执行回调

*/

export default App;